<template>
	<div class="ProductItemNew">
		<div style="text-align: left;"><span>组件名称：</span>底部文字说明组件</div>
		<blue-button :text="'新增'" :clickEvent="clickAdd"></blue-button>
		<table class="sv-table">
			<tr class="table-th">
				<th>标题</th>
				<th>内容</th>
				<th>更新日期</th>
				<th>操作</th>
			</tr>
			<tr class="table-tr" v-for="(item,index) in myDateList">
				<td><span>{{item.relTitle}}</span></td>
				<td><span v-html="JSON.parse(item.extendField).content"></span></td>
				<td>{{item.updateTm?myGetTime(item.updateTm):myGetTime(item.createTm)}}</td>
				<td style="text-align: center;">
					<gray-button class="grayBtn" :text="'更新'" :clickEvent="clickEdit.bind(this, index,item)"></gray-button>
					<gray-button class="grayBtn" :text="'删除'" :clickEvent="deleteGoods.bind(this, item)"></gray-button>
				</td>
			</tr>
		</table>
		<edit-model ref="editModel" title="自定义新人规则说明">
			<div class="slot-banner" slot="main">
				<div>
					<p class="eidt-slot-title" style="width: 23%;">自定义规则名称<span class="required" style="display: inline;">*</span></p>
					<input name="ss" class="mySelect" v-model="dataListSinger.relTitle" />
				</div>
				<div>
					<p class="eidt-slot-title" style="width: 100%;">自定义说明内容<span class="required" style="display: inline;">*</span></p>
					<div ref="noticeEditor" style="text-align: left;">
					</div>
				</div>
				<div class="fabu-box">
					<blue-button text="发布" :clickEvent="upLoadImg"></blue-button>
					<gray-button text="取消" :clickEvent="hideModel" class="confimBtn"></gray-button>
				</div>
			</div>
		</edit-model>
		<m-toast ref="toast"></m-toast>
		<m-dialog ref="dialog"></m-dialog>
	</div>

</template>

<script>
	import BlueButton from "../../../edit-components/BlueButton";
	import getDate from "./getGoodsDate.js";
	import madd from "./add.js";
	import medit from "./edit.js";
	import deleteGoods from './delete.js';
	import GrayButton from "../../../edit-components/GrayButton";
	import EditModel from "../../../edit-components/EditModel";
	import Toast from "../../../edit-components/Toast";
	import Dialog from "../../../edit-components/Dialog";
	import WangEditor from "WangEditor";
	export default {
		props: {
			relGroup: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				dataList: [],
				uploadType: '',
				dataListSinger: {},
				editItem: null,
				editor: null,
				contentdata: "",
			}
		},
		components: {
			"blue-button": BlueButton,
			"gray-button": GrayButton,
			"edit-model": EditModel,
			"m-toast": Toast,
			"m-dialog": Dialog,
		},
		computed: {
			myDateList() {
				return this.dataList;
			},

		},
		methods: {
			//获取门店code
			getShopCode() {
				this.storeCode = localStorage.getItem("storeCode");
			},
			//数据 渲染
			getDateList() {
				let callback = (data) => {
					this.dataList = data;
				}
				getDate(callback, this.relGroup);
			},
			//新增
			add() {
				let params = this.getParams();
				let callback = data => {
					this.dataList = data;
					this.$refs.editModel.hideCover();
				}
				madd(params, this.relGroup, callback);
			},
			edit() {
				let params = this.getParams();
				let callback = data => {
					this.dataList = data;
					this.$refs.editModel.hideCover();
				}
				medit(params, this.relGroup, callback);
			},
			deleteGoods(item) {
				console.log(item, 'aa');
				let msg = '确定要删除吗？';
				let confirmFn = () => {
					let params = {
						rid: item.rid,
						storeCode: this.storeCode,
						relGroup: this.relGroup
					}
					let callback = data => {
						this.dataList = data;
					}
					deleteGoods(params, this.relGroup, callback);
				}
				this.infoDialog(msg, confirmFn);

			},
			getParams() {
				//检验名称
				if(!this.dataListSinger.relTitle) {
					this.$refs.toast.toast("自定义规则名称不能为空");
					return;
				}
				//检验内容
				if(this.editor.txt.html() == "<p><br></p>") {
					this.$refs.toast.toast("规则内容不能为空");
					return;
				}
				this.contentdata = this.editor.txt.html()
				var obj = {
					"content": this.contentdata
				}
				var str = JSON.stringify(obj);
				if(this.uploadType == 'add') {
					var params = {
						relTitle: this.dataListSinger.relTitle,
						storeCode: this.storeCode,
						relGroup: this.relGroup,
						extendField: str,
					}
				} else if(this.uploadType == 'edit') {
					var params = {
						storeCode: this.storeCode,
						relTitle: this.dataListSinger.relTitle,
						rid: this.editItem.rid,
						relGroup: this.relGroup,
						extendField: str,
					}
				}
				return params;
			},
			infoDialog(msg, confirmFn) {
				this.$refs.dialog.dialog({
					msg,
					confirmFn
				});
			},
			myGetTime(param) {
				if(param) {
					let date = new Date(param);
					let year = date.getFullYear();
					let month = checkTime(date.getMonth() + 1);
					let day = checkTime(date.getDate());
					let hour = date.getHours();
					let min = checkTime(date.getMinutes());
					let sec = checkTime(date.getSeconds());
					let str = '';
					let mHour = 0;
					if(0 < Number(hour) && Number(hour) < 12) {
						mHour = hour;
						str = '上午'
					} else {
						mHour = Number(hour) - 12;
						str = '下午'
					}

					function checkTime(i) {
						if(i < 10) {
							i = '0' + i;
						}
						return i;
					}
					return year + '/' + month + '/' + day + '  ' + str + ' ' + mHour + ':' + min;
				} else {
					return '';
				}
			},
			//初始化富文本
			initNoticeEditor() {
				this.editor = new WangEditor(this.$refs.noticeEditor)
				this.editor.customConfig.menus = [
					'head', // 标题
					'bold', // 粗体
					'italic', // 斜体
					'underline', // 下划线
					'strikeThrough', // 删除线
					'foreColor', // 文字颜色
					'backColor', // 背景颜色
					'link', // 插入链接
					'image', // 插入图片
					'list', // 列表
					'justify', // 对齐方式
					'quote', // 引用
					'emoticon', // 表情
					'undo', // 撤销
					'redo' // 重复
				];
				this.editor.customConfig.uploadImgServer = "http://files.scn.weilian.cn/upload";
				// 将图片大小限制为 10M
				this.editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024;
				this.editor.customConfig.uploadImgHooks = {
					customInsert: function(insert, result, noticeEditor) {
						if(result.code == 200) {
							var url = result.visitPath;
							insert(url)
						} else {
							layer.msg("上传图片失败!");
						}
					}
				}
				this.editor.change = function() { // 这里是change 不是官方文档中的 onchange
					// 编辑区域内容变化时，实时打印出当前内容
					this.contentdata = this.txt.html()
				}

				this.editor.create()
				/*this.editor.txt.html('<p>输入内容...</p>')*/
			},
			//点击新增按钮
			clickAdd() {
				if(this.dataList.length > 0) {
					this.$refs.toast.toast("此模块只可添加一条数据");
					return;
				}
				this.showModel();
				this.uploadType = 'add';
				this.dataListSinger = {};
				this.editor.txt.html("<p><br></p>")
			},
			clickEdit(index, item) {
				console.log(item, '编辑')
				this.dataListSinger = item;
				this.showModel();
				this.editItem = item;
				this.uploadType = 'edit';
				//富文本编辑器内容
				this.editor.txt.html(JSON.parse(item.extendField).content)
			},
			showModel() {
				this.$refs.editModel.showCover();
			},
			hideModel() {
				this.$refs.editModel.hideCover();
			},
			upLoadImg() {
				if(this.uploadType == 'add') {
					this.add();
				} else {
					this.edit();
				}
			},
			errorToast(msg, duration = 1000) {
				this.$refs.toast.toast(msg, duration);
			},
		},
		filters: {

		},
		created() {
			this.getDateList();
			this.getShopCode();
		},
		mounted() {
			this.initNoticeEditor()
		},
		watch: {
			relGroup() {
				this.getDateList();
				this.getShopCode();
				this.initNoticeEditor()
			}
		}

	}
</script>

<style scoped>
	.confimBtn {
		margin-left: 20px;
	}
	
	.grayBtn {
		display: inline-block;
	}
	
	.fabu-box {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	
	.mySelect {
		border: 1px solid #ddd;
		padding: 5px 5px;
		width: 50%;
		height: unset;
		margin-bottom: 10px;
	}
	
	.casor {
		cursor: not-allowed;
	}
	
	.ProductItemNew tr td:nth-child(2) span {
		display: inline-block;
		width: 180px;
		height: 66px;
		line-height: 66px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>